<template>
  <div class="itemMusicList">
    <div class="top">
      <div class="topLeft">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-bofang"></use>
        </svg>
        <span>播放全部(共{{ props.songList.length }}首)</span>
      </div>
      <div class="topRight">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jiahao1"></use>
        </svg>
        <span>收藏{{ props.subscribedCount }}</span>
      </div>
    </div>
    <div class="content">
      <div
        class="itemSong"
        v-for="(song, index) in props.songList"
        :key="song.id"
      >
        <div class="left" @click="playMusic(index)">
          <span>{{ index + 1 }}</span>
          <div class="center">
            <p class="songName">{{ song.name }}</p>
            <p class="authorName">
              <span v-for="auth in song.ar" :key="auth.id">
                {{ auth.name }}
              </span>
            </p>
          </div>
        </div>
        <div class="right">
          <svg class="icon1" aria-hidden="true" v-if="song.mv != 0">
            <use xlink:href="#icon-24gl-playSquare"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-daohang"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useStore } from 'vuex'
const store = useStore()
const props = defineProps(['songList', 'subscribedCount'])
const playMusic = (i) => {
  store.commit('upDateplayList', props.songList)
  store.commit('upDateplayListIndex', i)
}
console.log(props)
</script>
<style lang='scss' scoped>
.itemMusicList {
  width: 100%;
  padding: 0.2rem;
  padding-bottom: 1.2rem;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  background: #fff;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.8rem;
    .topLeft {
      display: flex;
      justify-content: space-between;
      width: 40%;
      .icon {
        width: 0.4rem;
        height: 0.4rem;
        fill: black;
      }
    }
    .topRight {
      display: flex;
      height: 100%;
      // width: 2rem;
      border-radius: 0.4rem;
      color: #fff;
      justify-content: space-between;
      align-items: center;
      padding: 0.2rem;
      background-color: #ff1800;
      .icon {
        fill: #fff;
      }
    }
  }
  .content {
    .itemSong {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.2rem;
      .left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:first-child {
          color: #b9b4b5;
        }
        .center {
          width: 4rem;
          padding: 0.4rem; //超出的文本隐藏
          .songName,
          .authorName {
            overflow: hidden;
            color: #1b1c21;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .authorName {
            margin-top: 0.1rem;
            color: #b9b4b5;
          }
        }
      }
      .right {
        position: relative;
        .icon1 {
          position: absolute;
          left: -40px;
          width: 0.5rem;
          height: 0.5rem;
        }
        .icon {
          width: 0.5rem;
          height: 0.5rem;
          fill: #b0aaaf;
        }
      }
    }
  }
}
.icon {
  fill: #fff;
}
</style>
